/**
 * fa图标选择器 根据开源项目https://gitee.com/wujiawei0926/iconpicker修改而来
 * @ lianyi	29397395@qq.com
 */

layui.define(['jquery', 'layer'], function(exports) {
	var $ = layui.jquery,
		layer = layui.layer,
		icons = [];

	var iconPicker = {
		options: {},
		render: function(options) {
			options.row = options.hasOwnProperty('row') && $.isNumeric(options.row) ? options.row : 3; // 每页行数，< 1 表示不分页
			options.column = options.hasOwnProperty('column') && $.isNumeric(options.column) && options.column > 0 ? options.column : 4; // 每页列数
			options.search = options.search || true;
			options.ratio = options.hasOwnProperty('ratio') && /^\s*(0|[1-9]\d*)(\.\d+)?\s*$/.test(options.ratio) ? parseFloat(options.ratio) : 0.8; // 图标高度和宽度的比值

			if (options.hasOwnProperty('width') && /^\d+$/.test(options.width)) options.width += 'px'; // 选择器宽度

			options.id = options.id || 'iconPicker-' + new Date().getTime();

			this.options = options;

			if ($(options.elem).next().is('.iconPicker'))
				$(options.elem).next().remove();

			this.renderSelect(options);
			this.renderBody(options);
			this.listener(options);

			if (options.select && options.select.constructor === Function)
				this.select = options.select;

			return this;
		},

		renderSelect: function(options) {
			var selectHtml = '<div class="iconPicker" id="' + options.id + '">' +
				'<div class="iconPicker-select">' +
				'<div class="iconPicker-select-icon"></div>' +
				'<div class="iconPicker-select-clear"><i class="layui-icon layui-icon-delete"></i></div>' +
				'<div class="iconPicker-select-edge"><i class="layui-icon layui-icon-triangle-d"></i></div>' +
				'</div>' +
				'</div>';

			$(options.elem).hide().after(selectHtml);
			this.setIcon($(options.elem).val() || '');
		},

		renderBody: function(options) {
			icons = [];
			$.ajax({
				url: options.url,
				type: 'get',
				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
				async: true,
				success: function(res) {
					$.each(res, function(key, value) {
						$.each(value, function(i, v) {
							icons.push(key + ' fa-' + v);
						});
					});
					if (icons.length < 1) return layer.msg('获取fa图标数量为0');

					var bodyHtml = '<div class="layui-anim layui-anim-upbit iconPicker-body" style="width: ' + (options.width || '100%') + ';">' +
						(options.search ? '<div class="iconPicker-search"><input class="layui-input" maxlength="50"/><i class="layui-icon"></i></div>' : '') +
						'<div class="iconPicker-list-box">' +
						'<div class="iconPicker-list"></div>' +
						'<div class="iconPicker-page"></div>' +
						'</div>' +
						'</div>';

					$('#' + options.id + '.iconPicker > .iconPicker-select').after(bodyHtml);

					iconPicker.search(options);

					if (options.success && options.success.constructor === Function)
						options.success($(options.elem));
				},
				error: function(xhr, textstatus, thrown) {
					layer.msg('fa图标接口有误');
				}
			});
		},

		select: function(fa) {},

		search: function(options, text) { // 图标搜索
			var count = 0,
				limit = options.row > 0 ? options.row * options.column : count,
				iconlist = '';

			$.each(icons, function(index, v) {
				if (limit <= 0 && index === 0) iconlist += '<div class="iconPicker-list-item">';
				if (!text || v.indexOf(text.toLowerCase()) >= 0) {
					if ((limit > 0 && count % limit === 0)) iconlist += '<div class="iconPicker-list-item">';

					iconlist += "\n" + '<div class="iconPicker-icon-item" title="' + v + '" style="width: ' + options.iconWidth + '; height: ' + options.iconHeight + '"><i class="' + v + '"></i></div>';

					if ((limit > 0 && (count + 1) % limit === 0)) iconlist += "\n</div>";
					count++;
				}
				if (limit <= 0 && index === icons.length - 1) iconlist += "\n</div>";
			});

			$('#' + options.id + '.iconPicker > .iconPicker-body > .iconPicker-list-box > .iconPicker-list').html(count > 0 ? iconlist : '<p class="iconPicker-tips">无数据</p>');
			if (count > 0) {
				var elem_icon = $('#' + options.id + '.iconPicker > .iconPicker-body > .iconPicker-list-box > .iconPicker-list > .iconPicker-list-item > .iconPicker-icon-item');
				elem_icon.css('width', 'calc(100% / ' + options.column + ' - 10px)');
			}
			// 分页
			if (options.row > 0)
				$('#' + options.id + '.iconPicker > .iconPicker-body > .iconPicker-list-box > .iconPicker-page').html(function() {
					return '<div class="iconPicker-page-count">' +
						'<span class="iconPicker-page-current">' + 1 + '</span>/<span class="iconPicker-page-pages">' + Math.ceil(count / limit) + '</span> (<span class="iconPicker-page-length">' + count + '</span>)' +
						'</div>' +
						'<div class="iconPicker-page-operate">' +
						'<i class="layui-icon layui-icon-left iconPicker-page-prev" title="上一页"></i> <i class="layui-icon layui-icon-right iconPicker-page-next" title="下一页"></i>' +
						'</div>';
				});
		},

		setIcon: function(fa) {
			$('#' + this.options.id + '.iconPicker > .iconPicker-select > .iconPicker-select-icon').attr('title', fa || '').html('<i class="' + (fa || '') + '"></i>');
		},

		listener: function(options) {
			// 触发显示或隐藏
			$('#' + options.id + '.iconPicker').on('click', '.iconPicker-select > .iconPicker-select-icon, .iconPicker-select > .iconPicker-select-edge', function() {
				if ($(this).parents('.iconPicker').toggleClass('iconPicker-selected').hasClass('iconPicker-selected')) {
					$(this).parents('.iconPicker').find('.iconPicker-body > .iconPicker-search > input').focus();
					var elem_icon = $(this).parents('.iconPicker').find('.iconPicker-body > .iconPicker-list-box > .iconPicker-list > .iconPicker-list-item > .iconPicker-icon-item'),
						icon_height = elem_icon.width() * options.ratio;
					elem_icon.css('font-size', icon_height * 0.4 + 'px').css('height', icon_height + 'px');
				}
			});

			// 清空
			$('#' + options.id + '.iconPicker').on('click', '.iconPicker-select > .iconPicker-select-clear', function() {
				$(this).siblings('.iconPicker-select-icon').attr('title', '').html('<i class=""></i>');
				$(options.elem).val('');
			});

			// 点击空白处隐藏
			$(document).mousedown(function(event) {
				var elem = $('#' + options.id + '.iconPicker');
				if (!elem.is(event.target) && elem.has(event.target).length === 0) {
					$('#' + options.id + '.iconPicker').removeClass('iconPicker-selected');
				}
			});

			// 搜索 监听
			$('#' + options.id + '.iconPicker').on('input propertychange', '.iconPicker-body > .iconPicker-search > input', function() {
				iconPicker.search(options, $.trim($(this).val()));
			});

			// 选择图标
			$('#' + options.id + '.iconPicker').on('click', '.iconPicker-body > .iconPicker-list-box > .iconPicker-list > .iconPicker-list-item > .iconPicker-icon-item', function() {
				var fa = $(this).children('i').attr('class');
				$(this).parents('.iconPicker').removeClass('iconPicker-selected').find('.iconPicker-select > .iconPicker-select-icon').attr('title', fa).html('<i class="' + fa + '"></i>');
				$(options.elem).val(fa);
				iconPicker.select(fa);
			});

			//  上一页
			$('#' + options.id + '.iconPicker').on('click', '.iconPicker-body > .iconPicker-list-box > .iconPicker-page > .iconPicker-page-operate > .iconPicker-page-prev', function() {
				var elem_current = $(this).parents('.iconPicker-page').find('.iconPicker-page-count > .iconPicker-page-current'),
					elem_pages = $(this).parents('.iconPicker-page').find('.iconPicker-page-count > .iconPicker-page-pages'),
					current = parseInt(elem_current.text()),
					pages = parseInt(elem_pages.text());

				if (current <= 1) return false;

				elem_current.text(current - 1);
				$('#' + options.id + '.iconPicker > .iconPicker-body > .iconPicker-list-box > .iconPicker-list > .iconPicker-list-item').hide().eq(current - 2).css('display', 'flex');
			});

			// 下一页
			$('#' + options.id + '.iconPicker').on('click', '.iconPicker-body > .iconPicker-list-box > .iconPicker-page > .iconPicker-page-operate > .iconPicker-page-next', function() {
				var elem_current = $(this).parents('.iconPicker-page').find('.iconPicker-page-count > .iconPicker-page-current'),
					elem_pages = $(this).parents('.iconPicker-page').find('.iconPicker-page-count > .iconPicker-page-pages'),
					current = parseInt(elem_current.text()),
					pages = parseInt(elem_pages.text());

				if (current >= pages) return false;

				elem_current.text(current + 1);
				$('#' + options.id + '.iconPicker > .iconPicker-body > .iconPicker-list-box > .iconPicker-list > .iconPicker-list-item').hide().eq(current).css('display', 'flex');
			});
		}
	}

	layui.link(layui.cache.base + 'iconPicker/iconPicker.css');

	exports('iconPicker', iconPicker);
});